         body{
                font-family: 'SimSun', sans-serif; /* 使用宋体 */
         }
         header {
               text-align: center;

           }

        #chat {
          border:1px solid #ccc;
          padding:10px;
          height:500px; /* 固定高度 */
          overflow-y: auto;
          margin-bottom:10px;
          background: white;
          border-radius:10px;
          /*box-shadow: 0 10px rgba(0,0,0,0.1); !* 修正box-shadow格式 *!*/
          width:100%;
          max-width:1000px; /* 最大宽度 */
          margin:0 auto; /* 居中 */
        }
         .message {
          display: flex;
          align-items: center;
          margin: 10px 0; /* 增加间距 */
          opacity: 0;
          animation: fadeIn 0.5s forwards; /* 渐显动画 */
          line-height: 2.0;
          text-align: left;
          font-size: 15px;
        }
        .user-message {
          justify-content: flex-end; /* 用户消息在右侧 */
          width: 40%;
          padding: 10px;
          background-color: #1f9dff;
          color: #ffffff;
          margin-left: auto;
          border-radius: 10px;
          padding:13px;
          text-align: left;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          font-size: 15px;
        }
        .ai-message {
          justify-content: flex-start; /* AI消息在左侧 */
          width: 60%;
          padding: 13px;
          background-color: #ffffff;
          color: black;
          margin-right: auto;
          border-radius: 10px;
          margin: 10px;
          text-align: left;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          font-size: 15px;
        }
        .avatar {
          height: 40px; /* 头像大小 */

          border-radius: 50%; /* 圆形头像 */
          margin: 0 10px;
        }
        .user-message .avatar {
          /*margin-left: 10px;  头像与消息气泡的间距 */
          margin-right: 0;
        }
        .chat-message {
          display: flex;

        }
        .chat-user-message{
          display: flex;

      }
        @keyframes fadeIn {
          from { opacity:0; }
          to { opacity:1; }
        }
        input[type="text"] {
          width:890px; /* 调整宽度以适应容器 */
          height:45px;
          padding:10px;
          border-radius:5px;
          border:1px solid #ccc;
          margin-bottom:10px;
        }
        button {
          width:100px;
          height:45px;
          padding:10px;
          border-radius:5px;
          background-color: #007BFF;
          color: white;
          border: none;
          cursor: pointer;
          transition: background-color 0.3s;
        }
        button:hover {
          background-color: #0056b3;
        }
        #load {
          display: none; /* 初始隐藏 */
          text-align: center; /* 居中加载文字 */
          font-size: 20px; /* 可以根据需要调整字体大小 */
          padding: 10px 0 0 0; /* 增加一些内边距 */
        }

        /* 定义颜色渐变动画 */
        @keyframes colorChange {
          0%   { color: #ff0000; } /* 红色 */
          16.67% { color: #ff7f00; } /* 橙色 */
          33.33% { color: #ffff00; } /* 黄色 */
          50%   { color: #00ff00; } /* 绿色 */
          66.67% { color: #0000ff; } /* 蓝色 */
          83.33% { color: #4b0082; } /* 紫罗兰 */
          100%  { color: #ff0000; } /* 回到红色 */
        }

        /* 应用动画 */
        #load.show {
          display: block;
          animation: colorChange 2s infinite; /* 动画名称、持续时间和无限循环 */
        }

        .code-block {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 10px 0;
}

.code-block pre {
  margin: 0;
  white-space: pre-wrap; /* 保持代码的格式，同时允许换行 */
}

.code-block code {
  font-family: 'Courier New', Courier, monospace;
}

/* 为特定语言添加更多样式 */
.code-block.python pre {
  background-color: #f0f0f0;
}

.code-block.javascript pre {
  background-color: #f8f8f8;
}